<script setup>
import { ref } from 'vue'

const title = ref('子应用1 - Home 页面')
const description = ref('这是子应用1的首页，您可以通过导航栏访问其他页面。')
</script>

<template>
  <div class="home">
    <h1>{{ title }}</h1>
    <p class="description">{{ description }}</p>
    <div class="features">
      <div class="feature">
        <h3>独立运行</h3>
        <p>子应用可以独立运行和开发</p>
      </div>
      <div class="feature">
        <h3>数据通信</h3>
        <p>与主应用之间可以进行数据通信</p>
      </div>
      <div class="feature">
        <h3>样式隔离</h3>
        <p>确保子应用样式不会互相影响</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home {
  padding: 20px;
}

h1 {
  color: #42b983;
  margin-bottom: 20px;
}

.description {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.feature {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.feature h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.feature p {
  color: #666;
  line-height: 1.5;
}
</style>
